<template>
	<view class="page">
		<view class="tabbar">
			<view class="itemtab" :class="tab==null?'act':''" @click="selecttype(null)">
				<view class="name">
					全部订单
				</view>
				<view class="line">
					
				</view>
			</view>
			<view class="itemtab" :class="tab==4?'act':''" @click="selecttype(4)">
				<view class="name">
					未支付
				</view>
				<view class="line">
					
				</view>
			</view>
			
			<view class="itemtab" :class="tab==0?'act':''" @click="selecttype(0)">
				<view class="name">
					待审核
				</view>
				<view class="line">
					
				</view>
			</view>
			<view class="itemtab" :class="tab==1?'act':''" @click="selecttype(1)">
				<view class="name">
					已购买
				</view>
				<view class="line">
					
				</view>
			</view>
			<view class="itemtab" :class="tab==2?'act':''" @click="selecttype(2)">
				<view class="name">
				未通过
				</view>
				<view class="line">
					
				</view>
			</view>
		</view>
		<view class="listbox">
			<view class="itemlist" v-for="item in list " :key="item.id" @click="godetail(item)">
				<view class="imgbox">
					<image  :src="'https://admin.caifubang.top/prod-api'+item.productImg" mode=""></image>
				</view>
				<view class="info">
					<view class="nameline">
						<view class="goodname">
							{{item.productName}}
						</view>
						<view class="type" :class="item.auditStatus==0?'dai	':item.auditStatus==1?'tongguo':'wei'">
							{{item.auditStatus==0?'待审核':item.auditStatus==1?'已购买':item.auditStatus==2?'未通过':'未支付'}}
						</view>
					</view>
					<view class="labelline">
						{{item.merchantName}}   {{item.industryType}}
					</view>
					<view class="footline">
						<view class="pricebox">
							<view class="price">
								{{item.productPrice}}
							</view>
							<view class="danwei">
							   积分
							</view>
						</view>
						<view class="time" v-if="item.auditStatus!=4&&item.auditStatus!=2">
							{{item.paymentTime}}
						</view>
						<view class="timebtn" v-if="item.auditStatus==4" @click.stop="gopay(item)">
						    去支付
						</view>
						<view class="timebtn" v-if="item.auditStatus==2"  @click.stop="chongxinput(item)">
						    重新提交
						</view>
						
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="winpage" v-if="winshow||win2show">
			<view class="win1">
				<view class="iconfont icon-guanbi guanbi" @click="guanbi"></view>
				<view class="labelbox">
					<view class="label1">
						扫码购买
					</view>
					<view class="title1">
						识别下方二维码购买
					</view>
				</view>
		
				<view class="imgbox">
					<image :src="'https://admin.caifubang.top/prod-api'+sanurl" mode=""></image>
				</view>
				<view class="pricetitle">
					 应付 <view class="price">￥{{pro.productPrice}}</view>
				</view>
				<view class="upbox">
					<view class="putitle">
						上传支付记录
					</view>
					<view class="imglist">
						
						
					<image v-for="(item ,index) in imgurllist" :key="index" :src="'https://admin.caifubang.top/prod-api'+item" mode=""></image>
					
						
						
						<view  class="upbtn" @click="uppayimg">
							+
						</view>
					</view>
					<view class="imglabel">
						点击上传支付记录图片，保证图片真实，清晰
					</view>
				</view>
				<view class="titlebox">
					<view class="titletle">
						说明
					</view>
					<view class="content">
						扫码付款成功后，保留并上传支付记录图片审核成功后即购买成功
					</view>
				</view>
				<view class="pagebtn" @click="putorder">
				  提交审核
				</view>
			</view>
		</view>
		<view class="winpage" v-if="win2show">
			<view class="win1">
				<view class="iconfont icon-guanbi guanbi" @click="guanbi"></view>
				
				<view class="iconbox">
					<view class="iconfont icon-duigou-yuan">
						
					</view>
					<view class="win3title">
						提交成功
					</view>
					<view class="win3label">
						您已成功提交个人信息请耐心等待审核结果
					</view>
				</view>
				<view class="winbtn" @click="guanbi">
				完成
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {myOrders,getSysConfigByType,createOrder,DaizhifuByOrder} from '../../utils/api.js'
	export default {
		data() {
			return {
				winshow:false,
				win2show:false,
				tab:null,
				num:1,
				total:0,
				list:[],
				pro:{},
				sanurl:'',
				imgurllist:[]
			}
		},
		onShow() {
			let p={
				role:'buyer',
				auditStatus:this.tab,
				pageSize:10,
				pageNum:1
			}
			myOrders(p).then(res=>{
				this.list=res.data.data.items
				this.total=res.data.data.total
				console.log(res,'购买')
			})
		},
		methods: {
			godetail(e){
				let pro=JSON.stringify(e)
				uni.navigateTo({
					url:'/pages/paydetail/paydetail?pro='+pro
				})
			},
			chongxinput(e){
				this.pro=e
				 this.imgurllist=e.paymentScreenshot.split(",")
				 let p={
				 	 orderId:e.id
				  }
				 DaizhifuByOrder(p).then(res=>{
				 	console.log(res,'这是二维码')
				 	 this.sanurl=res.data.data.shoukuanma
				 	
				 	 this.winshow=true
				 	 
				 })
			
			},
			putorder(){
				let p={
					orderId:this.pro.id,
					 paymentScreenshot:this.imgurllist.toString()
				}
				createOrder(p).then(res=>{
					
					if(res.data.code==200){
						console.log(res,'提交订单成功')
						this.winshow=false,
						this.win2show=true
					}
				})
			},
			guanbi(){
				this.winshow=false
				this.win2show=false
				this.total=0
				this.num=0
				this.getlist()
			},
			
			uppayimg(){
				
				let that=this
				uni.chooseImage({
					count: 1, 
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
					   const file = res.tempFiles[0]  // File 对象
					      console.log(file)
										   uni.uploadFile({
										        url: 'https://admin.caifubang.top/prod-api/system/WeChatPublicApi/uploadImage',
										        file: file,                     // H5 用
										        name: 'file',
												 header: {
												    Authorization: 'Bearer ' + uni.getStorageSync('token'), 
												  },
										        success: (uploadRes) => {
												 that.imgurllist.push(JSON.parse(uploadRes.data).data.fileName)
												 console.log('上传成功', that.imgurllist)
										        }
										      })}
				});
			},
			
			
			
			gopay(e){
				 this.pro=e
				 console.log(e)
				 let p={
					 orderId:e.id
				 }
				DaizhifuByOrder(p).then(res=>{
					console.log(res,'这是二维码')
					 this.sanurl=res.data.data.shoukuanma
					
					 this.winshow=true
					 
				})
				
			},
			selecttype(e){
				this.tab=e
				this.total=0
				this.num=1
				this.getlist()
			},
			getlist(){
				let p={
					role:'buyer',
					auditStatus:this.tab,
					pageSize:10,
					pageNum:this.num
				}
				myOrders(p).then(res=>{
					this.list=res.data.data.items
					this.total=res.data.data.total
					console.log(res,'购买')
				})
			},
		},
		 onReachBottom() {
		    console.log("触底了，加载更多数据")
		    if(this.list.length==this.total){
				
			}else{
				this.num=this.num+1
				let p={
					role:'buyer',
					auditStatus:this.tab,
					pageSize:10,
					pageNum:this.num
				}
				myOrders(p).then(res=>{
					this.list=this.list.concat(res.data.data.items)
					
					console.log(res,'购买')
				})
			}
		  },
	}
</script>

<style lang="less" scoped>
  .page{
	  width: 750rpx;
	  box-sizing: border-box;
	  background-color: whitesmoke;
	  padding-top: 100rpx;
	  .tabbar{
		  width: 100%;
		  display: flex;
		  align-items: center;
		  justify-content: space-evenly;
		  position: fixed;
		  top:0rpx;
		  left: 0;
		  z-index: 99;
		  background-color: whitesmoke;
		  padding-top: 30rpx;
		  .itemtab{
			  height: 90rpx;
			  font-weight: bold;
			  color: #A2A2A2 ;
			  text-align: center;
			  .line{
				  width: 70rpx;
				  height: 8rpx;
				  border-radius: 4rpx;
				  margin: auto;
			  }
		  }
		  .act{
			  color: #FF6D00;
			  .line{
				  background-color: #FF6D00 ;
			  }
		  }
	  }
	  .listbox{
		  width: 100%;
		  box-sizing: border-box;
		  padding: 20rpx;
		  .itemlist{
			  width: 100%;
			  background-color: white;
			  box-sizing: border-box;
			  padding: 20rpx;
			  display: flex;
			  align-items: center;
			  margin-bottom: 20rpx;
			  .imgbox{
				  width: 120rpx;
				  height: 120rpx;
				  border-radius: 20rpx;
				  margin-right: 20rpx;
				  image{
					  width: 100%;
					  height: 100%;
					  border-radius: 20rpx;
				  }
			  }
			  .info{
				  flex: 1;
				  .nameline{
					  display: flex;
					  align-items: center;
					  justify-content: space-between;
					  .goodname{
					  					  font-weight: bold;
					  					  line-height: 1.6;
					  }
					  .type{
					  					  font-size: 30rpx;
					  					  font-weight: bold;
					  }
					  .dai{
					  					  color: #A2A2A2;
					  }
					  .tongguo{
					  					  color: #13C60F ;
					  }
					  .wei{
					  					  color: red;
					  }
				  }
				  .labelline{
					  line-height: 1.8;
					  font-size: 28rpx;
					  font-weight: bold;
				  }
				  .footline{ width: 100%;
				  display: flex;
				  align-items: center;
				  justify-content: space-between;}
				 
				  .pricebox{
					  display: flex;
					  align-items: center;
					  color: #FF462A;
					  .price{
						  font-weight: bold;
						  font-size: 30rpx;
					  }
					  .danwei{
						  font-size: 22rpx;
					  }
				  }
				  .time{
					  font-size: 20rpx;
					  color: #C3C3C3 ;
				  }
				  .timebtn{
					  width: 120rpx;
					  height: 50rpx;
					  border-radius: 10rpx;
					  text-align: center;
					  line-height: 50rpx;
					  color: white;
					  background-color: orange;
					  font-size: 26rpx;
				  }
				 
				  
				  
			  }
		  }
	  }
	  
	  .winpage{
	  	width: 100vw;
	  	height: 100vh;
	  	position: fixed;
		z-index: 100;
	  	top: 0;
	  	left: 0;
	  	right: 0;
	  	bottom: 0;
	  	background-color: rgba(0, 0, 0, 0.5);
	  	box-sizing: border-box;
	  	.win1{
	  		width: 100%;
	  		height: 90vh;
	  		position: absolute;
	  		bottom: 0;
	  		left: 0;
	  		right: 0;
	  		background-color: white;
	  		border-top-right-radius: 20rpx;
	  		border-top-left-radius: 20rpx;
	  		overflow-y: auto;
	  		.guanbi{
	  		  position: absolute;
	  		  right: 10rpx;
	  		  top: 10rpx;
	  		}
	  	
	  		.labelbox{
	  			width: 100%;
	  			box-sizing: border-box;
	  			padding: 20rpx;
	  			margin-top: 50rpx;
	  			text-align: left;
	  			line-height: 2;
	  			.label1{
	  				font-weight: bold;
	  				text-align: left;
	  			}
	  			.title1{
	  				font-size: 30rpx;
	  				text-align: left;
	  				color: #ADADAD ;
	  			}
	  		}
	  		.pickerbox{
	  			width: 100%;
	  			.picker{
	  				width: 90%;
	  				height: 60rpx;
	  				line-height: 60rpx;
	  				margin: auto;
	  				background-color: #F4F4F4 ;
	  				padding: 0 20rpx;
	  			}
	  		}
	  		.imgbox{
	  			margin: 40rpx auto;
	  			width: 300rpx;
	  			height: 300rpx;
	  			border: 10rpx solid orange;
	  			image{
	  				width: 100%;
	  				height: 100%;
	  			}
	  		}
	  		.pricetitle{
	  			display: flex;
	  			align-items: center;
	  			text-align: center;
	  			margin: auto;
	  			width: 100%;
	  			justify-content: center;
	  			.price{
	  				font-weight: bold;
	  				color: #FF2E00;
	  			}
	  		}
	  		.upbox{
	  			width: 90%;
	  			margin: auto;
	  			background-color: #F4F4F4;
	  			box-sizing: border-box;
	  			padding: 20rpx;
	  			.uptitle{
	  				font-weight: bold;
	  			}
	  			.imglist{
	  				width: 100%;
	  				display: flex;
	  				align-items: center;
	  				
	  				image{
	  					width: 150rpx;
	  					height: 150rpx;
	  					border-radius: 10rpx;
	  					margin: 10rpx;
	  				}
	  				.upbtn{
	  					width: 150rpx;
	  					height: 150rpx;
	  					border-radius: 10rpx;
	  					margin: 10rpx;
	  					line-height: 150rpx;
	  					text-align: center;
	  					font-size: 88rpx;
	  					background-color: white;
	                      color: gray;
	  				}
	  			}
	  			.imglabel{
	  				color: gray;
	  				font-size: 28rpx;
	  			}
	  		}
	  		
	  		.titlebox{
	  			width: 90%;
	  			margin: auto;
	  			background-color: #F4F4F4;
	  			box-sizing: border-box;
	  			padding: 20rpx;
	  			.titletl{
	  				font-weight: bold;
	  			}
	  			.content{
	  				color: gray;
	  				font-size: 28rpx;
	  			}
	  		}
	  		.pagebtn{
	  			width: 90%;
	  			height: 80rpx;
	  			line-height: 80rpx;
	  			text-align: center;
	  			margin:100rpx auto;
	  			border-radius: 40rpx;
	  			color: white;
	  			background-color: #FF5C00 ;
	  		}
	  		.iconbox{
	  			width: 36%;
	  			margin: 200rpx auto;
	  			.iconfont{
	  				font-size: 60rpx;
	  				font-weight: bold;
	  				color: #FF5C00 ;
	  				margin: auto;
	  				text-align: center;
	  			}
	  			.win3title{
	  				color: #FF5C00;
	  				margin: 30rpx;
	  				text-align: center;
	  			}
	  			.win3label{
	  				text-align: center;
	  				font-size: 28rpx;
	  				color: #ADADAD ;
	  				font-weight: bold;
	  			}
	  		}
	  		.winbtn{
	  			width: 450rpx;
	  			height: 70rpx;
	  			border-radius: 10rpx;
	  			text-align: center;
	  			line-height: 70rpx;
	  			margin: auto;
	  			color: #FF5C00 ;
	  			border: 1rpx solid #FF5C00;
	  		}
	  	}
	  
	  	
	  }
  }
</style>
